<script setup>
import { ref } from 'vue'
import { formatStamp, getRencentDate } from '@/assets/js/utils'
const emits = defineEmits(['change'])
const timeType = ref('天')
function onTimeChange(type, range) {
    timeType.value = type
    let dRange = []
    if (type == 'custom') {
        dRange = range
    } else {
        const endDate = formatStamp(+new Date(), 'yyyy-MM-dd hh:mm:ss')
        let startDate = ''
        if (type == '天') {
            startDate = endDate
        } else if (type == '周') {
            startDate = getRencentDate(-7)
        } else if (type == '月') {
            startDate = getRencentDate(-30)
        } else if (type == '年') {
            startDate = getRencentDate(-365)
        }
        dRange = [startDate, endDate]
        dateRange.value = dRange
    }
    emits('change', dRange, timeType.value)
}
const dateRange = ref([])
</script>
<template>
    <el-button-group>
        <el-button
            :type="timeType == '天' ? 'primary' : 'default'"
            @click="onTimeChange('天')"
        >
            今日
        </el-button>
        <el-button
            :type="timeType == '周' ? 'primary' : 'default'"
            @click="onTimeChange('周')"
        >
            近一周
        </el-button>
        <el-button
            :type="timeType == '月' ? 'primary' : 'default'"
            @click="onTimeChange('月')"
        >
            近一月
        </el-button>
        <el-button
            :type="timeType == '年' ? 'primary' : 'default'"
            @click="onTimeChange('年')"
        >
            近一年
        </el-button>
        <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="onTimeChange('custom', $event)"
        />
    </el-button-group>
</template>
<style lang="scss" scoped></style>
